<template>
	<div v-if="liveGameState" class="flex items-center text-[12px] text-t-3">
		<div>{{ gamePartText }}</div>
		<div v-if="showTime" class="flex justify-end items-center tabular-nums ml-1">
			{{ showTime }}
			<span class="w-1">{{ showCountdown ? "'" : '' }}</span>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { LiveGameState } from '@/types'
import { PropType, ref, computed, onUnmounted } from 'vue'
import { GAME_PARTS, SportsType } from '@/enums'
import { getRelativeDateArr, t } from '@/utils'

const props = defineProps({
	liveGameState: {
		type: Object as PropType<LiveGameState>
	},
	sportId: {
		type: String as PropType<SportsType>,
		default: ''
	},
	date: {
		type: [Date, String, Number],
		default: null
	}
})

const currTime = ref(new Date())

const getBasketballTime = () => {
	const { gamePart, gameTime, gameTimeBFFGotAt, clockRunning } = props.liveGameState!
	let res = ''
	if (
		[
			GAME_PARTS.FirstQuarter,
			GAME_PARTS.SecondQuarter,
			GAME_PARTS.ThirdQuarter,
			GAME_PARTS.FourthQuarter,
			GAME_PARTS.FirstHalf,
			GAME_PARTS.SecondHalf,
			GAME_PARTS.Overtime
		].includes(gamePart)
	) {
		const intevalTime =
			gameTimeBFFGotAt && clockRunning ? Math.floor((Date.now() - gameTimeBFFGotAt) / 1000) : 0
		const adjustTime = Math.max(gameTime - intevalTime, 0)
		const minute = Math.floor(adjustTime / 60)
		const second = adjustTime % 60
		res = ` ${minute}:${second.toString().padStart(2, '0')}`
	}
	return res
}

const getFootballTime = () => {
	const { gamePart, gameTime, gameTimeBFFGotAt, clockRunning } = props.liveGameState!
	let res = ''
	if (
		[
			GAME_PARTS.FirstHalf,
			GAME_PARTS.SecondHalf,
			GAME_PARTS.FirstOvertime,
			GAME_PARTS.SecondOvertime
		].includes(gamePart)
	) {
		const intevalTime =
			gameTimeBFFGotAt && clockRunning ? Math.floor((Date.now() - gameTimeBFFGotAt) / 1000) : 0
		const adjustTime = gameTime + intevalTime
		const minute = Math.floor(adjustTime / 60)
		res = ` ${minute}`
	}
	return res
}

const gamePartText = computed(() => {
	if (props.liveGameState) {
		const { gamePart } = props.liveGameState
		if (gamePart !== undefined && gamePart !== null) {
			return t('matchLivePart.' + gamePart)
		}
	}
	return ''
})

const showTime = computed(() => {
	const date = new Date(props.date).valueOf()
	const { h, m } = getRelativeDateArr(date, currTime.value.valueOf())
	if (props.liveGameState) {
		const { gamePart } = props.liveGameState
		if (gamePart != null) {
			switch (props.sportId) {
				case SportsType.football:
				case SportsType.fifa24:
					return getFootballTime()
				case SportsType.basketball:
				case SportsType.nba2k:
					return getBasketballTime()
				case SportsType.badminton:
				case SportsType.tennis:
					return ''
			}
		}
	}
	if (date <= Date.now() && !props.liveGameState?.gamePart) {
		return t('match.preparing')
	}
	return h ? `${h}h ${m}m` : `${m}m`
})

const showCountdown = computed(() => {
	return (
		[SportsType.football, SportsType.fifa24].includes(props.sportId) &&
		Math.floor(currTime.value.valueOf() / 1000) % 2 === 0
	)
})

let timer: any = null

const onTimer = () => {
	timer = setTimeout(() => {
		currTime.value = new Date()
		onTimer()
	}, 1000)
}

onUnmounted(() => {
	timer && clearTimeout(timer)
})

onTimer()
</script>
